<template>
  <div>
    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>文档区</el-breadcrumb-item>
      <el-breadcrumb-item>基础乐理</el-breadcrumb-item>
      <el-breadcrumb-item>识谱</el-breadcrumb-item>
    </el-breadcrumb>
    <el-card class="box-card">
      <div>
        <el-tabs :tab-position="tabPosition" style="height: 100%;">
          <el-tab-pane label="六线谱">
            <div>
              <el-alert title="吉他谱左上角的信息有如下四个" type="success" :closable="false"></el-alert>
              <p>
                <el-tag effect="dark" style="margin-right: 90px">1=C</el-tag>
                <span>意思是do=C,至于是什么调,得看歌曲和弦,一般都是大调</span>
              </p>
              <p>
                <el-tag effect="dark" style="margin-right: 75px">Capo:1</el-tag>
                <span>变调夹夹在一品</span>
              </p>
              <p>
                <img :src="sudusrc" style="margin-right: 100px">
                <span>每分钟有多少拍的意思</span>
              </p>
              <p>
                <el-tag effect="dark" style="margin-right: 20px">Standard tuning</el-tag>
                <span>标准调弦的意思,一般不写,如果是其他调弦方式会写出来</span>
              </p>
            </div>
            <el-alert title="关于和弦按法" type="success" :closable="false"></el-alert>
            <div style="margin-top: 30px">
              <img :src="chordsrc">
            </div>
            <el-alert title="关于扫弦" type="success" :closable="false"></el-alert>
            <div style="margin-top: 30px">
              <img :src="sweepsrc">
            </div>
          </el-tab-pane>
          <el-tab-pane label="时值">
            <el-alert title="一拍就是手拍下去再上来,可以理解为画一个V" type="success" :closable="false"></el-alert>
            <div style="margin-top: 30px">
              <img :src="timesrc">
            </div>
          </el-tab-pane>
        </el-tabs>
      </div>
    </el-card>
  </div>
</template>
<script>
import sudu from '../../assets/sudu.png'
import chord from '../../assets/chord.png'
import sweep from '../../assets/sweep.png'
import time from '../../assets/time.png'
export default {
  data() {
    return {
      tabPosition: 'left',
      sudusrc: sudu,
      chordsrc: chord,
      sweepsrc: sweep,
      timesrc: time
    }
  },
  methods: {}
}

</script>
<style scoped>
.el-tab-pane {
  text-align: left;
  line-height: 38px;
}

</style>
